<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #app {
            width: 800px;
            margin: 20px auto;
        }

        tr {
            height: 50px;
            text-align: center;
        }

        .form-control {
            height: 40px;
            padding: 10px;
            width: 100%;
            border: 1px solid #DDD;
            border-radius: 4px;
        }

        .btn {
            border: 1px solid #DDD;
            width: 60px;
            line-height: 30px;
            text-align: center;
            color: #555;
            background: #EEE;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 700;
            outline: 0;
        }

        .active {
            background-color: #EEE;
        }

        table,
        td {
            border: 1px solid #CCC;
            /* 合并边框 */
            border-collapse: collapse;
        }

        .btn.danger {
            background-color: #D9534F;
            color: #FFF;
        }

        .btn.success {
            background-color: #337AB7;
            color: #FFF;
        }

        .line {
            border-bottom: 1px solid #DDD;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>品牌管理</h1>
        <div class="line"></div>
        <div>
            <!-- 键盘事件 -->
            <input @keyup.enter="submit" v-model="brandName" class="form-control" type="text" placeholder="请输入品牌名称">
        </div>
        <div class="line"></div>
        <table cellpadding="0" cellspacing="0" width="100%">
            <thead>
                <tr class="active">
                    <td width="120">id</td>
                    <td>品牌名称</td>
                    <td>添加时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in arr" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <button class="btn danger" @click="del(item.id)">删除</button>
                        <button class="btn success" @click="edit(item)">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            brandName: '',
            // 当等于0代表新增，否则是编辑
            currentId: 0,
            arr: JSON.parse(localStorage.getItem('arr') || '[]')
        },
        methods: {
            submit() {
                if (this.currentId == 0) {
                    console.log(this.brandName)
                    // 添加
                    let obj = {
                        id: this.arr.length == 0 ? 1 : this.arr[this.arr.length - 1].id + 1,
                        name: this.brandName,
                        ctime: Date.now()
                    }
                    this.arr.push(obj)
                    // 存储到localStorage
                    localStorage.setItem('arr', JSON.stringify(this.arr))
                    // 清空
                    this.brandName = ''
                } else {
                    let index = this.arr.findIndex(item => item.id == this.currentId)

                    this.arr[index].name = this.brandName
                    this.arr[index].ctime = Date.now()
                    localStorage.setItem('arr', JSON.stringify(this.arr))
                    // 清空
                    this.brandName = ''
                    // currentId还原
                    this.currentId = 0
                }

            },
            del(id) {
                let index = this.arr.findIndex(item => item.id == id)
                console.log(index)
                // 删除
                this.arr.splice(index, 1)
                localStorage.setItem('arr', JSON.stringify(this.arr))
            },
            edit(obj) {
                // 记录编辑的id
                this.currentId = obj.id
                // 把编辑的名称绑定到输入框
                this.brandName = obj.name
            }
        },
        computed: {

        }
    });
</script>

</html>